<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单的隐藏与显示</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            // 事件绑定，点击事件
            $("h2").click(function(){
                // next():获取下一个元素
                // 当前点击的列表
                let u = $(this).next();
                // 判断当前列表是隐藏还是显示
                // 如果是隐藏的
                if(u.css("display") == "none"){
                    // 此时其他列表可能存在显示的
                    // 可以直接将所有列表全部隐藏
                    $("ul").hide();
                    // 将当前列表显示出来
                    u.show();
                } else{
                    // 如果当前列表是显示的,则其他列表一定是隐藏的,只需要将当前列表隐藏起来
                    u.hide();
                }
            });
        })
    </script>
</head>
<body>
<h2>电子产品</h2>
<ul style="display: block;" id="u1">
    <li>手机</li>
    <li>平板</li>
    <li>电脑</li>
</ul>
<h2>家用电器</h2>
<ul style="display: none;" id="u2">
    <li>电视机</li>
    <li>冰箱</li>
    <li>空调</li>
    <li>洗衣机</li>
</ul>
<h3>水果</h3>
<ul style="display: none;" id="u3">
    <li>苹果</li>
    <li>西瓜</li>
    <li>香蕉</li>
</ul>
</body>
</html>